<template>
	<div class="photoContainer">
		<div class="mui-content">
			<div id="slider" class="mui-slider ">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>
					</div>
				</div>

			</div>
			<div class="mui-content-padded" v-for="item in items" :key="item.createAt">
				<p>{{item.created}}</p>
				<p>	<img :src="item.url" data-preview-src="" data-preview-group="1" /></p>
			</div>
		</div>
	</div>
</template>

<script>
	import mui from '../../../static/mui/js/mui.js'
	// import muiz from '../../../static/mui/js/mui.zoom.js'
	// import muix from '../../../static/mui/js/mui.previewimage.js'
	// Vue.prototype.mui = mui
	mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
   // mui.previewImage();
	export default {
		data() {
			return {
				items: []
			}
		},
		created() {
			this.getphotoList();
		},
		methods: {
			getphotoList() {
				this.$http.get('https://www.apiopen.top/meituApi?page=2', {
						params: { //参数
							page: this.page,
						},
					}).then(res => { //请求成功后的处理函数     
						this.isLoading = false;
						this.items = res.data.data;
					}).catch(err => { //请求失败后的处理函数   
						console.log(err)
					})
				}
			}
			
		}
</script>

<style>
	.photoContainer{
		padding-bottom: -30px;
	}
	.mui-content-padded img{
		width: 100%;
	}
	*{
		touch-action: pan-y;
	}
</style>
